<template>
<!--原料库   半成品库  成品库  详情-->
  <div class="LogisticsList" element-loading-background="rgba(255, 255, 255, 0.4)">
    <el-row class="main-el-row">
      <el-col :span="24" class="main-el-col">
         <div class="top-titleandbtn">
            <div class="color-box"></div>
            <p>{{name}}</p>
            <div class="right-box">
              <el-button type="info" size="medium" icon="el-icon-back" @click="closeBySH">返回</el-button>
            </div>
          </div>
          <div  class="div-by-top" :style="{height:height +'px'}">
            <div v-if="byshow == 1" class="div-el-top-form"><!--原料库-->
             <div class="div-form">
              <hy-form
                ref="pmCommon"
                :formTitle="formTitleByYLK"
                :button="{confirm: false}"
                size="medium"
                :gutter="40"
                col="6"
                labelWidth="110px"
                form-width="95%"
                button-width="200px"
                v-model="formDataByYLK"
                @submit="sumbitFormByYLK"
                :rules="rulesByYLK">
              </hy-form>
             </div>
            </div>
            <div v-if="byshow == 2 ||byshow == 3" class="div-by-top"><!--成品库-->
              <div class="div-form">
                <hy-form
                  ref="pmCommon"
                  :formTitle="formTitleByCPK"
                  :button="{confirm: false}"
                  size="medium"
                  :gutter="40"
                  col="6"
                  labelWidth="110px"
                  form-width="95%"
                  button-width="200px"
                  v-model="formDataByCPK"
                  @submit="sumbitFormByCPK"
                  :rules="rulesByCPK">
                </hy-form>
              </div>
            </div>
          </div>
          <div>
              <el-col class="div-bottom-left" :style="{height:height + 90 + 'px'}" :span="8">
                  <div :style="{'margin-top':(height +90-250)/2 + 'px'}" >
                    <div class="demo-image__preview">
                      <el-image 
                        style="width: 120px; height: 120px"
                        :src="url" 
                        :preview-src-list="srcList">
                      </el-image>
                    </div>
                    <div class="demo-image__preview">
                      <el-image 
                        style="width: 120px; height: 120px"
                        :src="url" 
                        :preview-src-list="srcList">
                      </el-image>
                    </div>
                  </div>
              </el-col>
              <el-col  :span="widthByYL">
                  <div class="div-bottom-right" :style="{height:height + 90 + 'px'}">
                    <div class="div-bottom-right-p" >
                      <p>入库记录</p>
                    </div>
                    <div >
                      <hy-table
                        :height="180"
                        fixed="right"
                        tableIndex="序号"
                        :editState="false"
                        :page-small="false"
                        :button="{edit: false, look: false}"
                        :filter="filter"
                        :titleData="titleDataBySC"
                        :data="dataBySC"
                        :pageState="false"
                        :checkbox="false"
                        type="multipleTable"
                      >
                      </hy-table>
                    </div>
                  </div>
              </el-col>
              <el-col v-if="byshow == 2 || byshow == 3" :span="8">
                <div class="div-bottom-right" :style="{height:height + 90 + 'px'}">
                    <div class="div-bottom-right-p" >
                      <p>{{nameByYclAndLbj}}</p>
                    </div>
                    <div v-if="byshow == 2"> <!--半成品库 -->
                      <hy-table
                        :height="180"
                        fixed="right"
                        tableIndex="序号"
                        :editState="false"
                        :page-small="false"
                        :button="{edit: false, look: false}"
                        :filter="filterByBCP"
                        :titleData="titleDataByBCP"
                        :data="dataByBCP"
                        :pageState="false"
                        :checkbox="false"
                        type="multipleTable"
                      >
                      </hy-table>
                    </div>
                    <div v-if="byshow == 3"> <!--成品库-->
                      <hy-table
                        :height="180"
                        fixed="right"
                        tableIndex="序号"
                        :editState="false"
                        :page-small="false"
                        :button="{edit: false, look: false}"
                        :filter="filterByCPK"
                        :titleData="titleDataByCPK"
                        :data="dataByCPK"
                        :pageState="false"
                        :checkbox="false"
                        type="multipleTable"
                      >
                      </hy-table>
                    </div>
                  </div>
              </el-col>
          </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from "axios";
export default {
    components: {
    },
    computed: {
        autoHeightTable () {
            return document.documentElement.scrollHeight
        },
        height () {
           return (document.documentElement.scrollHeight -240) / 2
        }
    },
    data () {
      return {
        formInline:[],
         url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
         srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ],
        byshow: 1,  // 
        name:'原料详情',
        filter: {},  // 数据处理
        totalNum: 0,  // 分页参数
        currentPage: 1,  // 分页参数
        widthByYL:16,
        filterByBCP:[],
        titleDataByBCP:[
          {label: '物料代码', prop: 'enterpriseName'},{label: '物料名称', prop: 'manufactureOrg'},
          {label: '需求量', prop: 'enterpriseName'},{label: '备注', prop: 'manufactureOrg'},
        ],
        dataByBCP:[],
        filterByCPK:[],
        titleDataByCPK:[
          {label: '零部件代码', prop: 'enterpriseName'},{label: '零部件名称', prop: 'manufactureOrg'}
        ],
        dataByCPK:[],
        formTitleByCPK: [
            {type: 'input', name: 'enterpriseName', label: '产品名称', placeholder: '请输入物料代码', prop: 'enterpriseName'},
            {type: 'input', name: 'linkedMan', label: '成品类型', placeholder: '请输入物料名称', prop: 'linkedMan'},
            {type: 'input', name: 'mobile', label: '图纸编号', placeholder: '请输入图纸编号', prop: 'mobile'},
            {type: 'input', name: 'address', label: '计量单位', placeholder: '请输入原料类别', prop: 'address'},
            {type: 'input', name: 'enterpriseName', label: '车型代码', placeholder: '请输入类型', prop: 'enterpriseName'},
            {type: 'input', name: 'linkedMan', label: '车号', placeholder: '请输入规格型号', prop: 'linkedMan'},
            {type: 'input', name: 'mobile', label: '当前库存', placeholder: '请输入单位', prop: 'mobile'},
            {type: 'input', name: 'address', label: '库存状态', placeholder: '请输入当前库存', prop: 'address'},
            {type: 'input', name: 'enterpriseName', label: '主机厂', placeholder: '请输入库存状态', prop: 'enterpriseName'},
            {type: 'input', name: 'linkedMan', label: '库存最大容量', placeholder: '请输入库存区间', prop: 'linkedMan'},
            {type: 'input', name: 'linkedMan', label: '库存最小容量', placeholder: '请输入库存区间', prop: 'linkedMan'},
            {type: 'input', name: 'mobile', label: '领料上线', placeholder: '请输入领料上线', prop: 'mobile'},
        ],
        formDataByCPK:{ enterpriseName:'',linkedMan:'',mobile:'',address:''},
        rulesByCPK:{},
        formTitleByYLK: [
            {type: 'input', name: 'enterpriseName', label: '物料代码', placeholder: '请输入物料代码', prop: 'enterpriseName'},
            {type: 'input', name: 'linkedMan', label: '物料名称', placeholder: '请输入物料名称', prop: 'linkedMan'},
            {type: 'input', name: 'mobile', label: '图纸编号', placeholder: '请输入图纸编号', prop: 'mobile'},
            {type: 'input', name: 'address', label: '原料类别', placeholder: '请输入原料类别', prop: 'address'},
            {type: 'input', name: 'enterpriseName', label: '类型', placeholder: '请输入类型', prop: 'enterpriseName'},
            {type: 'input', name: 'linkedMan', label: '规格型号', placeholder: '请输入规格型号', prop: 'linkedMan'},
            {type: 'input', name: 'mobile', label: '单位', placeholder: '请输入单位', prop: 'mobile'},
            {type: 'input', name: 'address', label: '当前库存', placeholder: '请输入当前库存', prop: 'address'},
            {type: 'input', name: 'enterpriseName', label: '库存状态', placeholder: '请输入库存状态', prop: 'enterpriseName'},
            {type: 'input', name: 'linkedMan', label: '库存最大容量', placeholder: '请输入库存区间', prop: 'linkedMan'},
            {type: 'input', name: 'linkedMan', label: '库存最小容量', placeholder: '请输入库存区间', prop: 'linkedMan'},
            {type: 'input', name: 'mobile', label: '领料上线', placeholder: '请输入领料上线', prop: 'mobile'},
            // {type: 'radio', name: 'selectche', label: '运输方式', data: [{name: '送车', id: 1}, {name: '自提', id: 0}], dataLabel: 'name', prop: 'selectche'}
          ],
        formDataByYLK:{ enterpriseName:'',linkedMan:'',mobile:'',address:''},
        rulesByYLK:{},
        titleDataBySC:[
          {label: '入库时间', prop: 'enterpriseName'},{label: '入库数量', prop: 'manufactureOrg'},
          {label: '生产线', prop: 'detectionResult'}
        ],
        dataBySC:[]
        
      }
    },
    created() {
       this.rawmaterialno = this.$route.query.rawmaterialno;
       this.byshow = this.$route.query.no;
       console.log("----------");
       console.log(this.byshow);
       
       
       switch(this.$route.query.no){
         case 1 : this.widthByYL = 16; this.name = '原料详情'; break;
         case 2 : this.widthByYL =8; this.name = '半成品详情'; this.nameByYclAndLbj = '原材料';break;
         case 3 : this.widthByYL =8; this.name = '成品详情'; this.nameByYclAndLbj = '零部件';break;
       }
       this.getData();
  },
  methods: {
    getData() {
      var apis = "Det_Warehouse", index = 3;
      axios(
        "/apis/WarehouseManagement.asmx/"+apis+"?index=" +
          index +
          "&jsondata=" +this.rawmaterialno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        console.log("list");
        console.log(list);
        
        // this.formInline =list;
      });
    },
    sumbitFormByYLK() {},
    sumbitFormByCPK() {},
    closeBySH () {
      console.log(this.byshow);
      if(this.byshow == 1) {
        this.$router.push({ path: "./Rawmaterialstore", query: { index: 8, index2: 3 }});
      }else if(this.byshow == 2){
        this.$router.push({ path: "./Semifinishedwh", query: { index: 8, index2: 4 } });
      }else {
        this.$router.push({ path: "./Finishedstore", query: { index: 8, index2: 5 } });
      }
    }
  }

}
</script>
<style scoped>
.div-by-top {
  margin-top: 10px;
  background-color: #fff;
}
.div-el-top-form{
  /* padding-top: 5%; */
  text-align: center;
}
.top-titleandbtn{
  height: 60px;
}
.div-bottom-left{
  /* width: 100%; */
  /* margin-left: 10px; */
  margin-top: 10px;
  text-align: center;
  background-color: #fff;
}
.div-form {
  padding-top: 7%;
}
.demo-image__preview{
  margin-top: 10px;
}
.div-bottom-right{
  margin-left: 10px;
  margin-top: 10px;
  background-color: #fff;
}
.div-bottom-right-p{
  height: 30px;
  border-bottom: 1px solid #EBEEF5;
}
.color-box{
  width:5px;
  height: 20px;
  float: left; 
  margin-top: 20px;
  margin-left: 10px;
  background-color: rgba(212, 22, 24, 1);
}
.top-titleandbtn p{
 float: left; 
 margin-top: 9px;
 margin-left: 5px;
 line-height: 40px;
}
.right-box{
  float:right;
  width:90px;
  height: 40px;
  margin-right: 10px;
  border-radius: 8px;
  margin-top: 10px;
}
</style>